<template>
  <div class="detailsCoupon" v-loading="loading">
    <span>当前券领取总数量：{{sumReceived}}</span>
    <span style="margin-left: 30px;">使用总数量：{{sumUsed}}</span>
    <el-table :data="tableData">
      <el-table-column label="发放类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.grantType | typeFilter}}
        </template>
      </el-table-column>
      <el-table-column prop="grantTime" label="发放时间" align="center"></el-table-column>
      <el-table-column prop="received" label="领取数量" align="center"></el-table-column>
      <el-table-column prop="used" label="使用数量" align="center"></el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="false"
      :current-page="searchData.pageNum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="searchData.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      align="center"
      style="margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
  export default {
    name: 'detailsCoupon',
    props: ['id'],
    filters: {
      typeFilter(type) {
        if(type == 1) {
          return '平台发放'
        } else {
          return '活动发放'
        }
      }
    },
    data() {
      return {
        searchData: {
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        sumReceived: 0,
        sumUsed: 0,
        total: null,
        loading: true
      }
    },
    mounted() {
      this.searchData.ticketId = this.id;
      this.getTableData();
    },
    methods: {
      getTableData() {
        this.$axios({
          method: 'post',
          url: '/system/cust-ticket/getTicketUseInfo',
          data: this.$qs.stringify(this.searchData)
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.iPage.records;
            this.sumReceived = res.data.sumReceived;
            this.sumUsed = res.data.sumUsed;
            this.total = res.data.iPage.total;
            this.loading = false;
          }
        })
      },
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchData.pageNum = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>



</style>
